<template>
  <div class="cov-container">
    <el-row>
      <el-col :span="24">
        <div class="cov-header"></div>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <div class="cov-cn-data">
          <div class="cov-cn-title">
            <i></i>
            <img alt src="../assets/img/icon_cov_hotspot.png">
          </div>
          <p class="cov-look-more">
            <span>
              查看更多
              <img alt src="../assets/img/icon_blue_right.png">
            </span>
          </p>
        </div>

        <div class="cov-new-info"
             v-for="item in  covHotNewList">
          <div class="cov-text">
            <div class="cov-text-box">
              <div class="cov-new">最新</div>
              <span>{{ item.title }}</span>
            </div>
          </div>
          <div class="icon-right">
            <img alt src="../assets/img/icon_right.png">
          </div>
        </div>

      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <div class="cov-btn">
          <template v-for="item in covIconList" :key="item.id">
            <div class="cov-icon">
              <div class="cov-a">
                <div class="cov-icon-img">
                  <img alt :src="item.url">
                  {{ item.text }}
                </div>
              </div>
            </div>
          </template>
        </div>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <div class="cov-cn-data">
          <div class="cov-cn-title">
            <i></i>
            国内数据
          </div>
          <div class="cov-cn-right">
            <span class="cov-cn-sp">
              统计截至北京时间 {{ parseTime(realTimeData.lastUpdateTime, '{y}-{m}-{d} {h}:{i}:{s}') }}
            </span>
          </div>
        </div>

        <div class="cov-recent-number">
          <div class="cov-local-confirm">
            <div class="cov-add">
              较上日
              <span>{{ chinaAdd.localConfirm > 0 ? '+' + chinaAdd.localConfirm : chinaAdd.localConfirm }}</span>
            </div>

            <div class="number">{{ chinaTotal.localConfirm }}</div>
            <div class="text">
              <span>本土现有确诊</span>
            </div>
          </div>
          <div class="cov-now-confirm">
            <div class="cov-add">
              较上日
              <span>{{ chinaAdd.nowConfirm > 0 ? '+' + chinaAdd.nowConfirm : chinaAdd.nowConfirm }}</span>
            </div>
            <div class="number">{{ chinaTotal.nowConfirm }}</div>
            <div class="text">
              <span>现有确诊</span>
            </div>
          </div>
          <div class="cov-confirm">
            <div class="cov-add">
              较上日
              <span>{{ chinaAdd.confirm > 0 ? '+' + chinaAdd.confirm : chinaAdd.confirm }}</span>
            </div>
            <div class="number">{{ chinaTotal.confirm }}</div>
            <div class="text">
              <span>累计确诊</span>
            </div>
          </div>
          <div class="cov-now-severe">
            <div class="cov-add">
              较上日
              <span>{{ chinaAdd.noInfect > 0 ? '+' + chinaAdd.noInfect : chinaAdd.noInfect }}</span>
            </div>
            <div class="number">{{ chinaTotal.noInfect }}</div>
            <div class="text">
              <span>无症状感染者</span>
            </div>
          </div>
          <div class="cov-import">
            <div class="cov-add">
              较上日
              <span>{{ chinaAdd.importedCase > 0 ? '+' + chinaAdd.importedCase : chinaAdd.importedCase }}</span>
            </div>
            <div class="number">{{ chinaTotal.importedCase }}</div>
            <div class="text">
              <span>境外输入</span>
            </div>
          </div>
          <div class="cov-dead">
            <div class="cov-add">
              较上日
              <span>{{ chinaAdd.dead > 0 ? '+' + chinaAdd.dead : chinaAdd.dead }}</span>
            </div>
            <div class="number">{{ chinaTotal.dead }}</div>
            <div class="text">
              <span>累计死亡</span>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <div class="cov-cn-data">
          <div class="cov-cn-title">
            <i></i>
            疫情地图
          </div>
          <div class="cov-cn-right">
            <span class="cov-cn-sp"></span>
          </div>

        </div>

        <div class="cov-map-container">
          <div class="cov-map-top-box">
            <div class="item-box"
                 :class="{current:show === true}"
                 @click="getListNowConfirm"
            >
              现存确诊
            </div>
            <div class="item-box"
                 :class="{current:show === false}"
                 @click="getConfirm"
            >
              累计确诊
            </div>
          </div>
          <div id="china_map" style="width: 100%;height: 728px;"></div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>


<script>

import {listOnsInfo, listHotNew, listNowAndConfirm} from '@/api'

export default {
  name: "Index",
  data() {
    return {
      // 中国省市区本土病例
      childrenList: [],
      // 获取疫情实时数据
      realTimeData: [],
      // chinaTotal 节点数据
      chinaTotal: [],
      // chinaAdd 节点数据
      chinaAdd: [],
      // 疫情热点列表数据
      covHotNewList: [],
      // 全国现有确诊人数
      nowConfirmList: [],
      // 全国累计确诊人数
      confirmList: [],
      // 导航图标数据
      covIconList: [],
      // 查询参数
      queryParams: {},
      // 默认tab
      show: true
    }
  },
  created() {
    this.setIconList();
    this.getListHotNew();
    this.getListOnsInfo();
    this.chinaMapData();
  },
  methods: {
    /** 获取现有确诊、累计确诊数据，默认显示现有确诊数据 */
    chinaMapData() {
      listNowAndConfirm().then(res => {
        this.nowConfirmList = res.data.nowConfirm;
        this.confirmList = res.data.confirm;
        this.createReliefMaps(this.nowConfirmList)
      })
    },
    /** 获取现有确诊数据 */
    getListNowConfirm() {
      this.show = true;
      this.createReliefMaps(this.nowConfirmList)
    },
    /** 获取累计确诊数据 */
    getConfirm() {
      this.show = false;
      this.createReliefMaps(this.confirmList)
    },
    /** 获取疫情实时数据 */
    getListOnsInfo() {
      listOnsInfo().then(res => {
        console.log(res.data)
        this.realTimeData = res.data;
        this.chinaAdd = res.data.chinaAdd;
        this.chinaTotal = res.data.chinaTotal;
      })
    },
    /** 获取疫情热点列表数据 */
    getListHotNew() {
      listHotNew().then(res => {
        this.covHotNewList = res.data;
      })
    },

    /** 渲染导航图标数据 */
    setIconList() {
      this.covIconList = [
        {id: 112, url: require('@/assets/img/icon_inquiry.png'), text: '问医生'},
        {id: 223, url: require('@/assets/img/icon_check.png'), text: '核酸检测'},
        {id: 334, url: require('@/assets/img/icon_material.png'), text: '防疫物资'},
        {id: 445, url: require('@/assets/img/icon_travel.png'), text: '出行政策'}
      ]
    }
  }
}
</script>

<style lang="scss" scoped>

.cov-header {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 30.7%;
  color: #fff;
  font-size: 10px;
  text-align: center;
  background: url("../assets/img/header_bg.png") top no-repeat;
  background-size: cover;
}

.cov-cn-data .cov-cn-title img {
  position: relative;
  width: 90px;
  height: 100%;
}

.cov-cn-data .cov-look-more span:hover {
  text-decoration: underline;
  cursor: pointer;
}

.cov-cn-data .cov-look-more {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  color: #4169e2;
  font-weight: 500;
  font-size: 16px !important;
  background-color: #fff;

  span {
    position: relative;
    display: flex;
    align-items: center;
    padding-left: 5px;
    line-height: 5px;
    text-align: center;

    img {
      display: table-cell;
      vertical-align: middle;
      text-align: center;
      width: 16px;
      height: 100%;
    }
  }
}

.cov-text {
  flex-grow: 1;
  margin: 3px 0;
}

.cov-text-box span:hover {
  text-decoration: underline;
  cursor: pointer;
  color: #4169e2;
}

.cov-new-info {
  display: flex;
  align-items: center;
  color: #1a1a1a;
  font-size: 16px;

  line-height: 18px;
  margin: 10px 10px;
  background-color: #fff;

  .cov-text-box {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;

    word-break: break-all;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;

    .cov-new {
      display: inline-block;
      margin-right: 10px;
      padding: 0 3px;
      color: #fff;
      font-weight: 500;
      text-align: center;
      vertical-align: top;
      border-radius: 5px;
      background-color: #f74c31;
    }
  }

  .icon-right {
    flex-shrink: 0;
    margin-left: 5px;

    img {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      width: 15px;
      height: 15px;
    }
  }
}


.cov-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  background-color: #fff;
  border-top: 3px solid #f7f7f7;
  border-bottom: 10px solid #f7f7f7;

  .cov-icon {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    align-items: center;
    justify-content: center;
    width: auto;
    margin: 10px;
    font-size: 13px;
    text-align: center;

    .cov-a {
      position: relative;
      display: flex;
      cursor: pointer;

      .cov-icon-img {
        -webkit-filter: none;
        filter: none;
        animation: fadeIn___1lDGV 1s forwards;

        img {
          display: block;
          width: 50px;
          margin: 0 auto;
          object-fit: cover;
        }
      }
    }
  }
}

.cov-recent-number .cov-local-confirm {
  background-color: #fffaf7;

  .cov-add span, .number {
    color: #e57631;
  }
}

.cov-recent-number .cov-now-confirm {
  background-color: #fff8f8;

  .cov-add span, .number {
    color: #e61c1d;
  }
}

.cov-recent-number .cov-confirm {
  background-color: #fff4f4;

  .cov-add span, .number {
    color: #be2121;
  }
}

.cov-recent-number .cov-now-severe {
  background-color: #fef7ff;

  .cov-add span, .number {
    color: #ae3ac6;
  }
}

.cov-recent-number .cov-import {
  background-color: #f1f5ff;

  .cov-add span, .number {
    color: #4e8be6;
  }
}

.cov-recent-number .cov-dead {
  background-color: #f3f6f8;

  .cov-add span, .number {
    color: #4e5a65;
  }
}

.cov-recent-number {
  display: flex;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  padding-bottom: 10px;

  .cov-local-confirm, .cov-now-confirm, .cov-confirm, .cov-now-severe, .cov-import, .cov-dead {
    width: 30%;
    margin: 3px;
    padding: 15px 0 30px;
    position: relative;
    text-align: center;

    .cov-add {
      color: #7c7c7c;
      font-size: 12px;
      line-height: 12px;
      height: 12px;
      font-weight: 500;
      margin-top: 10px;
    }
  }

  .number {
    font-size: 30px;
    line-height: 30px;
    height: 30px;
    font-weight: 600;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .text {
    font-size: 18px;
    height: 18px;
    line-height: 18px;
    color: #222;
    font-weight: 500;
  }

}

.current {
  color: #4169e2 !important;
  font-weight: 500;
  background-color: #fff;
}

.cov-map-container {
  margin: 10px;
  border: 1px solid #f3f4f7;
  border-radius: 15px 15px 0 0;
}

.cov-map-top-box {
  position: relative;
  display: flex;
  display: -ms-flexbox;
  justify-content: space-between;
  height: 46px;
  background-color: #f3f4f7;
  border-radius: 15px 15px 0 0;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  margin-bottom: 10px;

  .item-box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    width: 50%;
    height: 100%;
    color: #404a60;
    font-size: 18px;
    border-radius: 15px 15px 0 0;
  }
}

</style>
